﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="../../css/mui.css">
    <script src="../../js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="../../js/common.js" type="text/javascript"></script>
    <script src="../../js/config.js"></script>
    <script src="../../js/common/mui.min.js"></script>
    <style>
        .a1 {
            background: url('../../images/welcome/1.png') center center;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-size: 100%;
        }

        .a2 {
            background: url('../../images/welcome/2.png') center center;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-size: 100%;
        }

        .a3 {
            background: url('../../images/welcome/3.png') center center;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-size: 100%;
        }

        .a4 {
            background: url('../../images/welcome/4.png') center center;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-size: 100%;
        }

        .btn {
            background: url('../../images/welcome/btn.png') no-repeat  center center;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-size: 60%;
        }
        div,img,a,li{
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
    </style>
</head>
<body>
    <div id="slider" class="mui-slider mui-fullscreen" style="display:none">
        <div class="mui-slider-group">
            <!-- 第一张 -->
            <div class="mui-slider-item">
                <a href="#" class="a1">

                </a>
            </div>
            <!-- 第二张 -->
            <div class="mui-slider-item">
                <a href="#" class="a2">

                </a>
            </div>
            <!-- 第三张 -->
            <div class="mui-slider-item">
                <a href="#" class="a3">

                </a>
            </div>

            <!-- 第四张 -->
            <div class="mui-slider-item">
                <a href="#" class="a4">
                    <div id="enter" class="btn" style="height: 60px; position: absolute; bottom: 16%; z-index: 3">
                    </div>
                </a>
            </div>

        </div>
        <div class="mui-slider-indicator">
            <div class="mui-indicator mui-active"></div>
            <div class="mui-indicator"></div>
            <div class="mui-indicator"></div>
            <div class="mui-indicator"></div>
        </div>
    </div>

    <script>
        //创建子页面，首个选项卡页面显示，其它均隐藏；
        mui.plusReady(function () {
              var isNewInstall = plus.storage.getItem(storageManager.isNewInstall);
              if (isNewInstall && isNewInstall == "1") {
                  // 跳入主页面
                  plus.webview.open("main.html", "main.html", {}, "pop-in", 100, {});
                  return;
              }

            // 首次使用APP进入欢迎页
            $("#slider").show();
            plus.navigator.setFullscreen(true);
            plus.navigator.closeSplashscreen();
            $("#enter").on("click", function () {
                if (!checkNetworkHeath()) { return;}
                plus.storage.setItem(storageManager.isNewInstall, "1");
                plus.navigator.setFullscreen(false);
                plus.webview.open("main.html", "main.html", {}, "pop-in", 100, {});
            });
        });

        function checkNetworkHeath() {
            // 判断当前网络状况
            var currentNetworkType = plus.networkinfo.getCurrentType();
            console.log("当前网络" + currentNetworkType);
            if (currentNetworkType && (plus.networkinfo.CONNECTION_UNKNOW == currentNetworkType || plus.networkinfo.CONNECTION_NONE == currentNetworkType)) {
                plus.nativeUI.alert("无网络连接！");
                return false;
            }

            return true;
        }


        
        

    </script>

</body>
</html>